<template>
  <div class="p-15 bg-f2">
    <el-form class="pAll bg-fff" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="服务端地址:" prop="ip">
            <el-input v-model.trim="ruleForm.ip" clearable placeholder="服务端地址"></el-input>
          </el-form-item>
          <!-- <el-form-item label="端口号:" prop="dk">
            <el-input v-model.trim="ruleForm.dk" clearable placeholder="65535"></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-button :loading="buttonLoad" type="primary" class="btnSizeStyle" size="medium" @click="baoCun()" v-preventReClick>保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { pinT } from '@/utils/allUrl.js'
export default {
  data() {
    return {
      ruleForm: {
        ip: '',
        id: '',
        dk: '',
      },
      peiziID: '', // 配置id
      rules: {
        ip: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          {
            pattern: /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/,
            message: '请输入正确的服务器地址地址',
            trigger: 'blur',
          },
        ],
        dk: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { pattern: /^-?[0-9]\d*$/, message: '只能输入数字', trigger: 'selecet' },
          { min: 0, max: 5, message: '长度在 5 个字符之间', trigger: 'blur' },
        ],
      },
      client: null,
      buttonLoad: false,
    }
  },
  created() {
    // 获取数据
    this.getList()
  },
  methods: {
    async getList() {
      const { data: res } = await this.$http.post(`${pinT}server/selectServer `)
      switch (res.code) {
        case '0000':
          this.ruleForm = {
            ip: res.data.server.ip,
            id: res.data.server.id,
          }
          break
        default:
          break
      }
    },
    async baoCun() {
      this.buttonLoad = true
      const { ip, id } = this.ruleForm
      const params = new URLSearchParams()
      params.append('IP', ip)
      params.append('id', id)
      const { data: res } = await this.$http.post(`${pinT}server/inserOrUpdatetServer`, params)
      this.buttonLoad = false
      switch (res.code) {
        case '0000':
          this.$message.success(res.message)
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    // baoCun(ruleForm) {
    //   this.buttonLoad = true
    //   this.$refs.ruleForm.validate(async (valid) => {
    //     if (valid) {
    //       this.createConnection()
    //     } else {
    //       this.goliebiao = false
    //       this.buttonLoad = false
    //       return this.$message({
    //         type: 'error',
    //         message: '请填写正确的信息',
    //         center: true,
    //       })
    //     }
    //   })
    // },
    // async successBtn() {
    //   const { iotIp, iotdk } = this.ruleForm
    //   // const { iotIp, iotdk, iotzh, iotmm } = this.ruleForm
    //   const params = new URLSearchParams()
    //   if (this.peiziID) {
    //     params.append('ID', this.peiziID)
    //   }
    //   params.append('IP', iotIp)
    //   params.append('PORT', iotdk)
    //   // params.append('MQTT_ACCOUNT', iotzh)
    //   // params.append('MQTT_PASSWORD', iotmm)
    //   const { data: res } = await this.$http.post(`${pinT}iot/inserOrUpdatetLot`, params)
    //   this.buttonLoad = false
    //   switch (res.code) {
    //     case '0000':
    //       this.$message({
    //         type: 'success',
    //         message: res.message,
    //         center: true,
    //       })
    //       break
    //     default:
    //       this.$message({
    //         type: 'error',
    //         message: res.message,
    //         center: true,
    //       })
    //       break
    //   }
    // },
    // // 创建连接
    // createConnection() {
    //   const connectUrl = `ws://${this.ruleForm.iotIp}:${this.ruleForm.iotdk}/mqtt`
    //   this.client = mqtt.connect(connectUrl, this.options)
    //   // 建立连接
    //   this.client.on('connect', function (data) {
    //     console.log(data)
    //     if (!data) {
    //       this.successBtn()
    //     } else {
    //       this.buttonLoad = false
    //       this.$message.error('请检查服务端地址和端口号是否正确')
    //     }
    //   })
    //   this.client.on('reconnect', (error) => {
    //     if (error === undefined) {
    //       this.client.reconnecting = false
    //       this.buttonLoad = false
    //       this.client.end()
    //       this.$message.error('请检查服务端地址和端口号是否正确')
    //     }
    //   })
    // },
  },
  destroyed() {
    if (this.client) {
      // this.client.disconnect()
      this.client.end()
    }
  },
}
</script>
<style lang="scss" scoped>
.fooer_btn {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>
